<template>
  <div>
    <el-container>
    <!-- 顶部栏 -->
      <el-header>
    <div class="header">
      <span class="iconfont icon-zhedie" @click="isCollapses">新闻头条管理系统</span>
    </div>
       <el-button v-if='showbutton' @click='clearn' type="info">登录</el-button>
    <div  v-else class="userinfo">
      <img :src="datainfo.photo">
    <el-dropdown>
      <span class="el-dropdown-link">
      {{datainfo.name}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>设置</el-dropdown-item>
        <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    </div>
  <!-- 侧边栏 -->
  </el-header>
    <el-container class="container">
  <el-aside
  :width='isCollapse ? "56px":"220px"'>
    <el-menu 
      class="el-menu-vertical-demo"
       background-color="#545c64"
      text-color="#fff"
      active-text-color="#409eff"
      unique-opened
      :collapse="isCollapse"
      :collapse-transition='false'
      router
      >
      <el-menu-item index="/home">
        <i class="iconfont icon-shouye"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="/article">
        <i class="el-icon-menu"></i>
        <span slot="title">内容管理</span>
      </el-menu-item>
       <el-menu-item index="/image">
        <i class="el-icon-document"></i>
        <span slot="title">素材管理</span>
      </el-menu-item>
       <el-menu-item index="/publish">
        <i class="iconfont  icon-paper-airplane"></i>
        <span slot="title">发布文章</span>
      </el-menu-item>
       <el-menu-item index="/comment">
        <i class="iconfont icon-xinxi"></i>
        <span slot="title">评论管理</span>
      </el-menu-item>
       <el-menu-item index="/fans">
        <i class="iconfont  icon-liwu-"></i>
        <span slot="title">粉丝管理</span>
      </el-menu-item>
       <el-menu-item index="/settings">
        <i class="el-icon-setting"></i>
        <span slot="title">个人设置</span>
      </el-menu-item> 
    </el-menu>

  </el-aside>
   <el-main>
     <router-view></router-view>
   </el-main>
  </el-container>
</el-container>
  </div>
</template>

<script>
  export default {
    name:'leftmenu',
    data () {
      return {
        datainfo:{
          name:'',
          photo:''
        },
        userinfo:{
          mobile:'',
          code:''
        },
        showbutton:true,
        isCollapse:false
      }
    },
    created () {
      this.logindata() 
      this.$bus.$on('updateuserinfo',data=>{
         this.datainfo.name = data.name
         this.datainfo.photo = data.photo
      })
    },
    methods: {
    async  logindata(){
       let result= await this.$http({
       method:'get',
       url:'/mp/v1_0/user/profile',
       data:this.userinfo
       }) 
       this.showbutton=false
       this.datainfo=result.data.data
      },
    
      clearn(){
        this.$router.push('/login')
        this.logindata()
      },
      isCollapses(){
        this.isCollapse = !this.isCollapse
      },
      logout(){
          this.$confirm('是否注销该用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            window.sessionStorage.clear('token')
            this.$router.push('/login')    
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消成功'
          });          
        });
      }
    
      }
    }
  
  
</script>

<style lang="less" scoped>
.container{
  height: 100vh;
}
 .el-header{

   background-color: rgba(0, 0, 0,.8);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-left: 0px;
 }
 .el-aside {
   background-color: #333744;
 }
 .el-main{
   background-color: #EAEDF1;
   border-right:none
 }
 .header{
   display: flex;
   align-items: center;
   color: #fff;
   font-size: 19px;
   font-weight: bold;
   img{
     width: 60px;
     height: 60px;
     border-radius: 50%;
   }
   span{
     font-size: 25px;
     margin-left: 300px;
     
   }
 }
 .menu{
    background-color: #333744;
    color: #fff;
 }
 .iconfont{
   margin-right: 10px;
 }
.togget{
  text-align: center;
  font-size: 19px;
  color: #fff;
  line-height: 24px;
  background-color: royalblue;
}
.userinfo{
  margin-right: 50px;
  img{
    width: 50px;
    height: 50px;
    background-size: 100% 100%;
    border-radius: 50%;
  }
  .el-dropdown{
    position: relative;
    top: -15px;
    left: 15px;
    font-size: 18px;
   color: #fff;
  }
}

</style>